<script>
import { toLngLat } from '../utils/convert-helper'
import registerMixin from '../mixins/register-component'
import { compile, mountedVNode, mountedRenderFn } from '../utils/compile'
// import AMap from 'AMap'

import Vue from 'vue'
export default {
    name: 'ElAmapInfoWindow',
    mixins: [registerMixin],
    props: [
        'vid',
        'isCustom',
        'autoMove',
        'closeWhenClickMap',
        'content',
        'size',
        'offset',
        'position',
        'showShadow',
        'visible',
        'events',
        'template',
        'vnode',
        'contentRender'
    ],
    data() {
        const self = this
        return {
            withSlots: false,
            tmpVM: null,
            propsRedirect: {
                template: 'content',
                vnode: 'content',
                contentRender: 'content'
            },
            converters: {
                template(tpl) {
                    const template = compile(tpl, self)
                    this.$customContent = template
                    return template.$el
                },
                vnode(vnode) {
                    const _vNode = typeof vnode === 'function' ? vnode(self) : vnode
                    const vNode = mountedVNode(_vNode)
                    this.$customContent = vNode
                    return vNode.$el
                },
                contentRender(renderFn) {
                    const template = mountedRenderFn(renderFn, self)
                    this.$customContent = template
                    return template.$el
                }
            },
            handlers: {
                visible(flag) {
                    // fixed Amap info-window reopen
                    const position = this.getPosition()
                    if (position) {
                        flag === false ? this.close() : this.open(self.$amap, [position.lng, position.lat])
                    }
                },
                template(node) {
                    this.setContent(node)
                }
            }
        }
    },
    created() {
        this.tmpVM = new Vue({
            data() {
                return { node: '' }
            },
            render(h) {
                const { node } = this
                return h('div', { ref: 'node' }, Array.isArray(node) ? node : [node])
            }
        }).$mount()
    },
    destroyed() {
        this.$amapComponent.close()
        this.tmpVM.$destroy()
        if (this.$customContent && this.$customContent.$destroy) {
            this.$customContent.$destroy()
        }
    },
    methods: {
        __initComponent(options) {
            if (this.$slots.default && this.$slots.default.length) {
                options.content = this.tmpVM.$refs.node
            }

            // control open / close by visible prop
            delete options.map

            this.$amapComponent = new AMap.InfoWindow(options)
            if (this.visible !== false) this.$amapComponent.open(this.$amap, toLngLat(this.position))
        }
    },
    render() {
        const slots = this.$slots.default || []
        if (slots.length) {
            this.tmpVM.node = slots
        }
        return null
    }
}
</script>
